<template>
  <!-- 直播课堂 -->
  <!-- 标题，关键词，共xx节，￥998, 888人购买 -->
  <div class="streaminglist" id="streaminglist">
    <Header></Header>
    <!--本来应该是导航，（方便全局替换）-->
    <!-- <HHeader></HHeader> -->
    <div class="periodiCon_dynamic">
      <div class="caseCont_crumbs">
        <span>
          <router-link :to="{name:'home'}">首页</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>
          <router-link :to="{name:'streaming'}">直播课堂</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>回放列表</span>
      </div>
      <div class="periodiCon_cluster_cont">
        <div class="periodiCon_cluster_cont_main">
          <ul v-if="periodiContList.length == 0">
            <div class="periodiCon_cluster_cont_main_nolist">
              <img src="../../../../static/zb/ky.png" alt />
              <p>暂无此直播课程，敬请期待哦！</p>
            </div>
          </ul>
          <ul>
            <li v-for="(item,index) in periodiContList" :key="index" @click="periodiCon(item)">
              <div class="periodiCon_cluster_Cont_img">
                <img :src="item.CoverPicturePath" alt />
              </div>
              <div class="periodiCon_cluster_Cont_right">
                <div class="periodiCon_cluster_Cont_right_tit">
                  <span
                    class="periodiCon_cluster_Cont_right_tit_tit"
                    style="display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;"
                  >{{item.Title}}</span>
                  <span
                    class="periodiCon_cluster_Cont_right_tit_huifang"
                    @click="huifang(item)"
                    @click.stop
                    v-if="item.IsPlayBack == true"
                  >精彩回放</span>
                  <div style="clear:both;"></div>
                </div>
                <p>
                  <!-- OneToOne: false
OpenCourseId: "96B511D03E2CA8B1"
OpenId: "785928184BA39794"
                  Title: "观察性研究设计"-->
                  <span
                    v-for="(itemc,index) in (item.Label || '').split(',')"
                    :key="index"
                  >{{itemc}}</span>
                </p>
                <!-- <p style="text-decoration:line-through" v-if="item.DisCount < 1">￥{{item.Price}}.00</p>
                <p v-if="item.DisCount >= 1">￥{{item.Price}}.00</p>-->
                <!-- <p>
                  <span v-if="item.DisCount < 1">
                    {{parseInt(item.DisCount * 10)}}折后：
                    <span style="font-size:21px">￥{{(item.Price * item.DisCount).toFixed(2)}}</span>
                  </span>
                  <span>{{item.NumberPeople}}人报名</span>
                </p>-->
              </div>
              <div style="clear:both;"></div>
            </li>
            <div style="clear:both;"></div>
          </ul>
        </div>
      </div>
    </div>
    <div class="mowhite"></div>
    <FootBase></FootBase>
    
    <NaviRight></NaviRight>
  </div>
</template>

<script>
// import router from "@/router/index";
//juqery
import { pagination } from "../../../../src/assets/mixin/data-table";
import axios from "axios";
export default {
  mixins: [pagination],
  data() {
    return {
      periodiConact: 0,
      showfalse: 0,
      periodiContList: []
    };
  },
  methods: {
    getAllBackList() {
      axios
        .get("/api/LmCourseApi/GetHomePageLiveVideoList")
        .then(res => {
          this.periodiContList = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.getAllBackList();
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
#streaminglist {
  /deep/.el-pagination__total {
    display: none !important;
  }
  /deep/.el-pagination__sizes {
    display: none !important;
  }
  /deep/.el-pagination {
    text-align: center;
  }
  .periodiCon_dynamic {
    width: 1140px;
    margin: 0 auto;
    position: relative;
    .caseCont_crumbs {
      width: 1140px;
      height: 20px;
      margin: 0 auto;
      position: relative;
      margin-top: 28px;
      text-align: left;
      line-height: 20px;
      padding-left: 10px;
      span:nth-child(1) a {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      i {
        color: #767c82;
        font-size: 18px;
        margin-left: 10px;
        font-weight: bold;
      }
      span:nth-child(3) a,
      span:nth-child(5) {
        color: #000000;
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .periodiCon_cluster_cont {
      width: 100%;
      height: auto;
      .periodiCon_cluster_cont_main {
        width: 100%;
        height: auto;
        .periodiCon_cluster_cont_main_nolist {
          width: 100%;
          height: 313px;
          text-align: center;
          img {
            width: 348px;
            height: 231px;
          }
          p {
            letter-spacing: 3px;
            color: #333;
            font-size: 25px;
          }
        }
        ul {
          width: 100%;
          height: auto;
          li:hover {
            background: #f7f8fa;
            .periodiCon_cluster_Cont_right {
              .periodiCon_cluster_Cont_right_tit {
                .periodiCon_cluster_Cont_right_tit_tit {
                  color: #003c80;
                }
              }
            }
          }
          li {
            width: 100%;
            padding: 15px 13px;
            list-style: none;
            border-bottom: 1px solid #e6e6e6;
            cursor: pointer;
            .periodiCon_cluster_Cont_img {
              width: 180px;
              height: 123px;
              float: left;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              .periodiCon_cluster_Cont_cover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                  0deg,
                  rgba(0, 0, 0, 0.6) 0%,
                  rgba(0, 0, 0, 0.3) 100%
                );
                i {
                  font-size: 40px;
                  color: #fff;
                  position: absolute;
                  left: 39%;
                  top: 27%;
                }
              }
            }
            .periodiCon_cluster_Cont_right {
              width: 924px;
              height: 124px;
              float: right;
              .periodiCon_cluster_Cont_right_tit {
                width: 100%;
                .periodiCon_cluster_Cont_right_tit_tit {
                  // width: 60%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  color: #333;
                  font-size: 18px;
                  float: left;
                }
                .periodiCon_cluster_Cont_right_tit_keyword {
                  display: inline-block;
                  span {
                    background: #eee;
                    border-radius: 9px;
                    line-height: 16px;
                    padding: 5px 6px;
                    display: inline-block;
                    font-size: 14px;
                    line-height: 1;
                    color: #777;
                    transform: scale(0.82);
                  }
                }
                .periodiCon_cluster_Cont_right_tit_huifang:hover {
                  background: #23b8ff;
                  color: #fff;
                }
                .periodiCon_cluster_Cont_right_tit_huifang {
                  display: inline-block;
                  border: 1px solid #23b8ff;
                  font-size: 14px;
                  color: #23b8ff;
                  padding: 2px 15px;
                  position: relative;
                  cursor: pointer;
                }
                .periodiCon_cluster_Cont_right_tit_huifang {
                  float: right;
                }
                a {
                  color: #333;
                  font-size: 18px;
                }
              }
              p:nth-child(2) {
                width: 85%;
                height: auto;
                margin-top: 9px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                span {
                  background: #eee;
                  border-radius: 9px;
                  line-height: 16px;
                  padding: 5px 6px;
                  display: inline-block;
                  font-size: 14px;
                  line-height: 1;
                  color: #777;
                  transform: scale(0.82);
                }
              }
              p:nth-child(3) {
                width: 100%;
                font-size: 19px;
                margin-top: 9px;
                color: #003c80;
                font-family: "Hiragino Sans GB", "Microsoft Yahei", arial,
                  \5b8b\4f53, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
              }
              p:nth-child(4) {
                width: 100%;
                font-size: 15px;
                margin-top: 0px;
                color: #999;
                span:nth-child(1) {
                  color: #333;
                  font-family: "Hiragino Sans GB", "Microsoft Yahei", arial,
                    \5b8b\4f53, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
                  position: relative;
                  top: 1px;
                  span {
                    color: #003c80;
                  }
                }
                span:nth-child(2) {
                  float: right;
                  position: relative;
                  top: 1px;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1010px) {
  .periodiCon_dynamic {
    width: 100% !important;
    .periodiCon_cluster_Left {
      width: 100% !important;
      margin-top: 56px !important;
    }
  }

  .streaminglist {
    margin-top: 58px;
    .caseCont_crumbs {
      display: none;
    }
    .periodiCon_cluster_cont {
      width: 94% !important;
      margin: 0 auto;
      .periodiCon_cluster_cont_main {
        width: 100% !important;
        ul {
          width: 100%;
          height: 100%;
          li {
            width: 50% !important;
            padding: 15px 8px !important;
            position: relative;
            float: left;
            .periodiCon_cluster_Cont_img {
              width: 100% !important;
              height: 123px !important;
            }
            .periodiCon_cluster_Cont_right {
              width: 100% !important;
              height: 102px !important;
              .periodiCon_cluster_Cont_right_tit {
                span {
                  font-size: 16px !important;
                }
              }
              p:nth-child(2) {
                margin-top: 2px !important;
              }
              p:nth-child(3) {
                margin-top: 2px !important;
                font-size: 16px !important;
              }
              p:nth-child(4) {
                margin-top: 2px !important;
                font-size: 14px !important;
                span:nth-child(1) span {
                  font-size: 16px !important;
                }
                span:nth-child(2) {
                  display: none;
                }
              }
              .periodiCon_cluster_Cont_right_tit_huifang {
                position: absolute !important;
                right: -3px !important;
                border: none !important;
                font-size: 13px !important;
                font-size: 14px !important;
                // top: 62px!important;
                top: 74% !important;
              }
            }
          }
        }
        .periodiCon_cluster_cont_main_nolist {
          width: 92% !important;
          height: 280px !important;
          margin: 0 auto;
          img {
            width: 100% !important;
            height: 83% !important;
          }
          p {
            font-size: 18px !important;
          }
        }
      }
    }
  }

  .mowhite {
    width: 100%;
    height: 105px;
    background: #fff;
  }

  /deep/.el-pagination {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
  }
  .floorTitle {
    width: 94% !important;
    margin: 0 auto;
  }
  .el-pagination::-webkit-scrollbar {
    display: none;
  }
  .caseCont_cluster_Right {
    display: none !important;
  }
  .caseCont_crumbs {
    margin-top: 86px !important;
    display: none !important;
  }
}
@media screen and (min-width: 1010px) {
  .mowhite {
    display: none;
  }
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>